import "./index.less";
import {Fetch} from  '../../libs/';
import {Url, md5Url} from  '../../libs/Url';
import {connect} from 'react-redux';
import {fetch} from  '../../stores/action';
import Animate from 'rc-animate';
import {parseSearch} from  '../../libs/utils';

class Duty extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: 1,
            photo: 1,
            data: {duty: {}}
        }
    }

    componentDidMount() {
        let clientInfo = parseSearch();
        if (clientInfo && clientInfo.clientid) {
            Fetch(Url.GET_CLASS, {body: {deviceid: clientInfo.clientid}})
                .then((res)=> {
                    if (res['class'] && res['class'].classid) {
                        clientInfo['class'] = res['class'];
                        clientInfo['school'] = res['school'];
                        clientInfo['device'] = res['device'];
                        clientInfo['classroom'] = res['classroom'];
                        // dispatch(clientInfoSet(clientInfo));

                        Fetch(Url.DUTY, {
                            body: {
                                classid: res['class'].classid
                            }
                        })
                            .then(res=> {
                                this.setState({data: res, loaded: true})
                            })
                            .catch(e=> {
                                console.log(e)
                            });
                        // dispatch(fetch({url: Url.HOME, classid: clientInfo.classid}));
                    } else {
                        alert('设备码没有跟班级对应，请核验!')
                    }
                })
                .catch(e=> {
                    console.log(e)
                })
        } else {
            alert('设备码不合法，请核验!')
        }
    }

    render() {
        const fileid = (this.state.data && this.state.data.duty) ? this.state.data.duty.fileid : '',
            state = this.state;

        return (
            <div className="duty clearfix" style={{}}>
                <div className="panel-item panel1 container-border"
                     style={{
                         background: 'url(' + require('../../imgs/schedule/clean_bg.png') + ')'
                     }}
                >
                    <div>
                        <div style={{position: 'relative'}}>
                            <Animate
                                component=""
                                transitionName="fade"
                            >
                                {
                                    state.loaded ? null :
                                        <img key="1" src={require('../../imgs/duty_no_data.png')} alt=""
                                             style={{
                                                 width: '100%',
                                                 height: '100%',
                                                 position: 'absolute',
                                                 top: 0,
                                                 right: 0,
                                                 bottom: 0, left: 0
                                             }}/>
                                }
                            </Animate>
                            {
                                state.loaded ? <img src={Url.FUN_UPLOAD_PREVIEW(fileid)} alt=""/> : null
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

const select = state => {
    return {
        clientInfo: state.clientInfo,
        [md5Url.DUTY]: state.fetchBySubject[md5Url.DUTY]
    }
};

export default connect(select)(Duty)